<template>
  <div>
    <TopFilter
      v-if="handleType=='show'?false:true"
      :list="topFilterList" :collapse="false" @filterChange="changeHandle"
      @onCollapse="collapseHandle"></TopFilter>
    <FilterTable

      :isSelectColumn="handleType=='show'?false:true"
      selectionType="single"
      ref="table" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" datakey="records"
      :onColumnsChange="columns => (this.columns = columns)"
      :onSyncTableData="tableChangeFun"
      :onRowSelectChange="selectChange"
    >
    </FilterTable>

    <div class="dialogBottmView">

      <multiuse-button type="primary" class="btnStyle" v-if="handleType=='add'" :click="closeMenu.bind(this,1)">保存
      </multiuse-button>

      <multiuse-button type="primary" class="btnStyle" :click="closeMenu.bind(this,2)">关闭</multiuse-button>
    </div>

  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {dictionary} from '@/utils/dictMixin';
  import moment from 'moment';
  import {
    addThreeException,
    updateStatus,
    getTmPartFacList
  } from '@/api/repair/threePacksOfManager/exceptionalPartsMaintenanceJingxsDuan';

  import {queryUnitCode} from '@/api/repair/batchEventManagement/activityDistribution';
  import {isEmpty} from '@/utils/utils';

  export default {
    name: 'add',
    components: {},
    mixins: [dictionary],
    data()
    {
      this.BaseTable = null;
      return {
        topFilterList: this.createTopFilterList(),
        visible: false,
        fetchApi: getTmPartFacList,
        fetchParams: {xhrAbort: this.handleType == 'show' ? true : false},
        columns: this.createTableColumns(),
        selectArr: []
      };
    },
    props: ['handleType', 'formData'],
    components: {},

    mounted()
    {
      this.BaseTable = this.$refs.table.$refs.pageTable;
      if (this.handleType == 'show')
      {
        this.getData();
      }
      this.getUnit();
    },
    methods: {

      async getUnit()
      {
        const res = await queryUnitCode();
        this.columns.find(item => item.dataIndex === 'unit').dictItems = res.data.map(x => ({
          text: x.UNIT_NAME,
          value: x.UNIT_CODE
        }));
      },

      /*根据ID查询*/
      async getData()
      {
        let res = this;

        let data = isEmpty(this.formData) ? {} : this.formData;
        data['partCode'] = data['partNo']

        this.BaseTable.EXECUTE_INSERT([data]);
      },

      tableChangeFun(val)
      {
      },
      selectChange(val)
      {
        this.selectArr = val
        console.log(val)
      },

      createTableColumns()
      {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props =>
            {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '配件代码',
            dataIndex: 'partCode',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '配件名称',
            dataIndex: 'partName',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '单位',
            dataIndex: 'unit',
            sorter: true,
            filter: true,
            filterType: 'input',
            dictItems: []
          },
          //
          // {
          //   title: '数量',
          //   dataIndex: 'counts',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          //
          // },
          // {
          //   title: '索赔单价',
          //   dataIndex: 'price',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          //
          // },

        ];
      },
      createTopFilterList()
      {
        return [
          {
            type: 'INPUT',
            label: '配件代码',
            fieldName: 'partCode',
            placeholder: '配件代码...'
          },
          {
            type: 'INPUT',
            label: '配件名称',
            fieldName: 'partName',
            placeholder: '配件名称...'
          },

        ];
      },

      collapseHandle()
      {
        this.$nextTick(() =>
        {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },

      changeHandle(val)
      {
        // val.bDate=moment(val['bDate']).format('YYYY-MM-DD')
        // val.eDate=moment(val['eDate']).format('YYYY-MM-DD')
        this.fetchParams = Object.assign({}, val);

        console.log(this.fetchParams)
      },

      async closeMenu(type)
      {
        if (type == 1)
        {

          let params = {
            'partNo': this.selectArr[0].partCode,
            'partName': this.selectArr[0].partName
          }

          let res = await addThreeException(params)
          if (res.resultCode == 200 && res.success == true)
          {
            this.$emit('close', 'refresh')
          } else
          {
            // let errMsg = isEmpty(res.errMsg) ? '操作失败' : res.errMsg;
            //
            // this.$notify.error({title: '提示信息', message: errMsg});
          }

        } else
        {

          this.$emit('close')
        }
      },
    }
  };
</script>

<style lang="less" scoped>
  .bg1 {
    border: 1px solid @borderColor;
    border-radius: @borderRadius;
    box-shadow: @boxShadow;
    padding: @modulePadding;
    padding-left: 0;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .bg2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .btn {
    text-align: center;
  }

  .btnStyle {
    margin-top: 10px;
  }

</style>
